<template>
  <view class="badge" :class="[`badge--${position}`, { 'badge--dot': value === '.' }]">
    <slot />
    <view v-show="show" class="badge__sup">
      <view class="badge__inner" :style="[getInnerStyle]">
        {{ value > max ? `${max}+` : value }}
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, computed } from '@vue/composition-api'

export default defineComponent({
  props: {
    value: {
      type: [String, Number],
      default: null,
    },
    position: {
      type: String,
      default: 'top-right',
    },
    max: {
      type: Number,
      default: 10000,
    },
    background: {
      type: String,
      default: '#ff0000',
    },
    show: {
      type: Boolean,
      default: true,
    },
  },
  setup(props) {
    const getInnerStyle = computed(() => {
      return { background: props.background }
    })
    return { getInnerStyle }
  },
})
</script>
<style lang="scss" scoped>
.badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  &__inner {
    padding: 0 10rpx;
    text-align: center;
    border-radius: 24rpx;
    font-size: 24rpx;
    font-weight: normal;
    color: #fff;
    transform: scale(0.83);
    transform-origin: center;
    line-height: 24rpx;
  }
  &--dot {
    .badge__inner {
      padding: 0;
      font-size: 0;
      width: 14rpx;
      height: 14rpx;
      border: 14rpx;
    }
  }
  &--top-right {
    .badge__sup {
      position: absolute;
      top: 0;
      right: 0;
      margin-top: -10rpx;
    }
    .badge__inner {
      position: relative;
      left: 50%;
    }
  }
  &--after {
    .badge__sup {
      margin-left: 16rpx;
    }
  }
}
</style>
